/**
 * filename: List
 * overview: 用来存放下方 Card 列表的 List 组件
 */

import update from 'immutability-helper';
import React, {CSSProperties, useCallback} from 'react';
import {useDrop} from 'react-dnd';
import IListData from './ListData';
import Card from './Card';

enum ItemTypes {
  Card = 'card'
}

const style: CSSProperties = {
  backgroundColor: 'white',
  border: '1px dashed gray',
  margin: '100px auto',
  minHeight: '300px',
  padding: '0 10px',
  textAlign: 'center',
  width: '80%',
  height: '80%',
  overflowY: "auto",
  overflowX: 'hidden'
};

export interface IListProps {
  cardList: IListData[];
  changeCardList: (list: IListData[]) => void;
}

const List: React.FC<IListProps> = ({cardList, changeCardList}) => {

  const [, drop] = useDrop({
    accept: ItemTypes.Card
  });

  const moveCard = useCallback((dragIndex: number, hoverIndex: number) => {

    /**
     * 1、如果此时拖拽的组件是 Box 组件，则 dragIndex 为 undefined，则此时修改，则此时修改 cardList 中的占位元素的位置即可
     * 2、如果此时拖拽的组件是 Card 组件，则 dragIndex 不为 undefined，此时替换 dragIndex 和 hoverIndex 位置的元素即可
     */
    if (dragIndex === undefined) {
      const lessIndex = cardList.findIndex((item: IListData) => item.id === -1);
      changeCardList(update(cardList, {
        $splice: [[lessIndex, 1], [hoverIndex, 0, {bg: "aqua", category: '放这里', id: -1}]],
      }));
    } else {
      const dragCard = cardList[dragIndex];
      changeCardList(update(cardList, {
        $splice: [[dragIndex, 1], [hoverIndex, 0, dragCard]],
      }));
    }
    // eslint-disable-next-line
  }, [cardList]);
  const a = () => {
    console.log(111111111);
  };

  return (
    <div style={style} ref={drop}>
      {
        cardList.length <= 0 ? <div style={{lineHeight: '60px'}}>请放入水果</div>
          : cardList.map((item: IListData, index: number) => {
            return <Card index={index} key={item.id} moveCard={moveCard} {...item} >
              <div>
                {
                  item.category
                }
              </div>
              {
                Array.isArray(item.childrens) && <List cardList={item.childrens} changeCardList={a}/>
              }
            </Card>;
          })
      }
    </div>
  );
};

export default List;
